.button {
  font-family: 'Courier New', Courier, monospace;
  padding: 0.5em;
  font-size: 12px;
  outline: none;
  border: none;
  border-radius: 4px;
  cursor: pointer;

  &:hover {
    opacity: 0.8;
  }
}

.error {
  @extend .button;

  color: white;
  background-color: red;
}

.primary {
  @extend .button;

  color: white;
  background-color: blue;
}


.content .content-box nav.sidebar {
  @extend .info;
}

p.info {
  background-color: #dee9fc;
}

.guide .info {
  border: 1px solid rgba(#000, 0.8);
  border-radius: 2px;
}

main.header .info {
  font-size: 0.8em;
}


// 占位选择器
// 有时候不想被扩展（如上面的 .button）选择器输出到 css 中，可以使用占位选择器
// 占位选择器在编译成 CSS 时，不会输出，但是扩展占位选择器会输出

%text-color {
  color: red;
}

p {
  @extend %text-color;
}
/* 
  52 ~ 58 行输出结果：
  p {
    color: red;
  }
*/